<template>
  <ex-dialog
    width="1000px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
      <el-form-item label="广告样式:" prop="advertiseType">
				<el-select v-model="ruleForm.advertiseType" placeholder="请选择" size="small" @change="changeAdvertiseType">
          <el-option v-for="item in advertiseTypeList" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
			</el-form-item>
      <el-form-item label="是否显示:" prop="isShow">
        <el-switch
          v-model="ruleForm.isShow"
          active-text="是"
          inactive-text="否"
          active-value="1"
          inactive-value="2">
        </el-switch>
      </el-form-item>
      <div class="template_box">
          <div class="oneImg" v-if="ruleForm.advertiseType == 1">
            <img :src="ruleForm.bannerList[0].imgUrl" alt="" v-if="ruleForm.bannerList[0].imgUrl">
            <div v-else>图片一</div>
          </div>
          <div class="twoImg" v-if="ruleForm.advertiseType == 2">
            <div class="">
              <img class="yl_img" :src="ruleForm.bannerList[0].imgUrl" alt="" v-if="ruleForm.bannerList[0].imgUrl">
              <div class="kong_img" v-else>图片一</div>
            </div>
            <div class="">
              <img class="yl_img" :src="ruleForm.bannerList[1].imgUrl" alt="" v-if="ruleForm.bannerList[1].imgUrl">
              <div class="kong_img" v-else>图片二</div>
            </div>
          </div>
          <div class="three_Img_1" v-if="ruleForm.advertiseType == 3">
            <div class="left">
              <img class="yl_img" :src="ruleForm.bannerList[0].imgUrl" alt="" v-if="ruleForm.bannerList[0].imgUrl">
              <div class="kong_img" v-else>图片一</div>
            </div>
            <div class="right">
              <div class="">
                <img class="yl_img" :src="ruleForm.bannerList[1].imgUrl" alt="" v-if="ruleForm.bannerList[1].imgUrl">
                <div class="kong_img" v-else>图片二</div>
              </div>
              <div class="">
                <img class="yl_img" :src="ruleForm.bannerList[2].imgUrl" alt="" v-if="ruleForm.bannerList[2].imgUrl">
                <div class="kong_img" v-else>图片三</div>
              </div>
            </div>
          </div>
          <div class="three_Img_1" v-if="ruleForm.advertiseType == 4">
            <div class="right">
              <div class="">
                <img class="yl_img" :src="ruleForm.bannerList[1].imgUrl" alt="" v-if="ruleForm.bannerList[1].imgUrl">
                <div class="kong_img" v-else>图片二</div>
              </div>
              <div class="">
                <img class="yl_img" :src="ruleForm.bannerList[2].imgUrl" alt="" v-if="ruleForm.bannerList[2].imgUrl">
                <div class="kong_img" v-else>图片三</div>
              </div>
            </div>
            <div class="left">
              <img class="yl_img" :src="ruleForm.bannerList[0].imgUrl" alt="" v-if="ruleForm.bannerList[0].imgUrl">
              <div class="kong_img" v-else>图片一</div>
            </div>
            
          </div>
          <!-- 四图广告 -->
          <div class="four_Img" v-if="ruleForm.advertiseType == 5">
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[0].imgUrl" alt="" v-if="ruleForm.bannerList[0].imgUrl">
              <div class="kong1_img" v-else>图片一</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[1].imgUrl" alt="" v-if="ruleForm.bannerList[1].imgUrl">
              <div class="kong1_img" v-else>图片二</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[2].imgUrl" alt="" v-if="ruleForm.bannerList[2].imgUrl">
              <div class="kong1_img" v-else>图片三</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[3].imgUrl" alt="" v-if="ruleForm.bannerList[3].imgUrl">
              <div class="kong1_img" v-else>图片四</div>
            </div>
          </div>
          <!-- <div class="four_Img" v-if="ruleForm.advertiseType == 5">
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[0].imgUrl" alt="" v-if="ruleForm.bannerList[0].imgUrl">
              <div class="kong1_img" v-else>图片一</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[1].imgUrl" alt="" v-if="ruleForm.bannerList[1].imgUrl">
              <div class="kong1_img" v-else>图片二</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[2].imgUrl" alt="" v-if="ruleForm.bannerList[2].imgUrl">
              <div class="kong1_img" v-else>图片三</div>
            </div>
             <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[3].imgUrl" alt="" v-if="ruleForm.bannerList[3].imgUrl">
              <div class="kong1_img" v-else>图片四</div>
            </div>
          </div> -->
          <!-- 五图广告 -->
          <div class="four_Img" v-if="ruleForm.advertiseType == 6">
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[0].imgUrl" alt="" v-if="ruleForm.bannerList[0].imgUrl">
              <div class="kong1_img" v-else>图片一</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[1].imgUrl" alt="" v-if="ruleForm.bannerList[1].imgUrl">
              <div class="kong1_img" v-else>图片二</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[2].imgUrl" alt="" v-if="ruleForm.bannerList[2].imgUrl">
              <div class="kong1_img" v-else>图片三</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[3].imgUrl" alt="" v-if="ruleForm.bannerList[3].imgUrl">
              <div class="kong1_img" v-else>图片四</div>
            </div>
            <div class="list">
              <img class="yl_img" :src="ruleForm.bannerList[4].imgUrl" alt="" v-if="ruleForm.bannerList[4].imgUrl">
              <div class="kong1_img" v-else>图片五</div>
            </div>
          </div>
      </div>
      <div class="bannerBox" v-for="(item,index) in ruleForm.bannerList" :key="200+index">
          <el-form-item :label="`广告${index+1}图片背景:`" :prop="`bannerList.${index}.imgUrl`" :rules="rules.imgUrl" ref="imgRef">
            <ImageUploadMore :limit="1" :fileSize="20" @successImg="(e) => {getBannerImg(e,index)}" :value="item.imgUrl	">
            </ImageUploadMore>
            <div v-if="(ruleForm.advertiseType == 3 || ruleForm.advertiseType == 4) &&  index == 0">建议尺寸181*152</div>
            <div v-else>建议尺寸345*90</div>
          </el-form-item>
          <el-form-item :label="`图片${index+1}标题:`" :prop="`bannerList.${index}.title`" :rules="rules.title">
            <el-input type="text" maxlength="6" v-model="item.title" autocomplete="off" :placeholder="`图片${index+1}标题:`" ></el-input>
          </el-form-item>
          <el-form-item :label="`图片${index+1}副标题:`" :prop="`bannerList.${index}.subTitle`" :rules="rules.subTitle">
            <el-input type="text" v-model="item.subTitle" autocomplete="off" :placeholder="`图片${index+1}副标题:`"></el-input>
          </el-form-item>
          
          <el-form-item :label="`跳转链接${index+1}:`" :prop="`bannerList.${index}.redirectType`" :rules="rules.redirectType">
            <el-radio-group v-model="item.redirectType">
              <el-radio label="1">神椰H5(含神椰小程序)</el-radio>
              <el-radio label="2">其他H5</el-radio>
              <el-radio label="3">小程序</el-radio>
              <el-radio label="4">分类</el-radio>
              <el-radio label="5">微信视频号直播</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="APPID:" :prop="`bannerList.${index}.appId`" :rules="rules.appId" v-if="item.redirectType == 3">
            <el-input type="text" v-model="item.appId" autocomplete="off" placeholder="请填写APPID"></el-input>
          </el-form-item>
          <el-form-item :label="`链接地址${index+1}:`" :prop="`bannerList.${index}.redirectUrl`" :rules="rules.redirectUrl" v-if="item.redirectType != 4&&item.redirectType != 5">
            <el-input type="text" v-model="item.redirectUrl" autocomplete="off" placeholder="请填写链接地址"></el-input>
          </el-form-item>
          <el-form-item :label="`神椰小程序链接地址${index+1}:`" :prop="`bannerList.${index}.wxRedirectUrl`" :rules="rules.wxRedirectUrl" v-if="item.redirectType == 1">
            <el-input type="text" v-model="item.wxRedirectUrl" autocomplete="off" placeholder="请填写链接地址"></el-input>
          </el-form-item>
          <el-form-item label="APP跳转:" :prop="`bannerList.${index}.appRedirectType`" :rules="rules.appRedirectType" v-if="item.redirectType != 4&&item.redirectType != 5">
            <el-select v-model="item.appRedirectType" placeholder="请选择" size="small" @change="(val) => changAppRedirectType(val,index)">
              <el-option v-for="item in appTypeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" :prop="`bannerList.${index}.appRedirectId`" :rules="rules.appRedirectId" v-if="(item.appRedirectType == 1 || item.appRedirectType == 2 || item.appRedirectType == 3 || item.appRedirectType == 4 || item.appRedirectType == 12 || item.appRedirectType == 13 || item.appRedirectType == 15) && item.redirectType != 4&&item.redirectType != 5">
            <el-select v-model="item.appRedirectId" placeholder="请选择" size="small" filterable>
              <el-option v-for="(aitem,aindex) in item.appRedirectIdList" :key="aindex" :label="aitem.value" :value="aitem.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="`分类${index+1}跳转:`" :prop="`bannerList.${index}.tagIdList`" :rules="rules.tagIdList" v-if="item.redirectType == 4">
            <el-select class="tagSel" v-model="item.tagIdList" placeholder="请选择" size="small" multiple>
              <el-option v-for="item in tagList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频号id" :prop="`bannerList.${index}.videoId`" :rules="rules.videoId" v-if="item.redirectType == 5" key="55">
            <el-input type="text" v-model="item.videoId" autocomplete="off" placeholder="请填写视频号id"></el-input>
          </el-form-item>
      </div>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  adminDict,
  addAdvertisement,
  editAdvertisement,
  advertisementInfo,
  bannerSelect
} from '@/api/incentiveManagement/adConfigNew'
import {
    addTagSelect,
  } from "@/api/merchantsNFR/yeCard"; 

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    
    return {
      loading: false,
      roleList: [],
      imgLoading: false,
      appList_1: [],
      appList_2: [],
      appList_3: [],
      appList_4: [],
      appList_12: [],
      appList_13: [],
      appList_15: [],
      appTypeList: [],
      advertiseTypeList: [
        {id: '1',value: '单图广告'},
        {id: '2',value: '双图广告'},
        {id: '3',value: '三图广告（左）'},
        {id: '4',value: '三图广告（右）'},
        {id: '5',value: '四图广告'},
        {id: '6',value: '五图广告'},
      ],
      tagList: [],
			ruleForm: {
        advertisePageType: '1',//广告页面 1 神椰页面 2 神椰乐园
        advertiseType: '1',//广告样式 1 单图广告 2 双图广告 3 三图广告（左）4 三图广告（右）
        isShow: '1',	//是否显示 1 显示 2 不显示
        bannerList:[
          {
            appId: '',//
            imgUrl: '',//图片url
            title: '',//图片标题
            subTitle: '',//图片副标题
            redirectType: '',//链接类型（1 神椰 2 H5 3 小程序）
            redirectUrl: '',//指定跳转链接
            wxRedirectUrl:'',//神椰小程序跳转链接
            appRedirectType: '', //APP跳转类型 1打卡活动 2打卡店铺 3神椰NFR 4盲盒活动 5神椰集市 6神椰工厂 7我的邀请码	
            appRedirectId:'', //APP跳转业务id
            appRedirectIdList: [],
            tagIdList: [],
            videoId:'',//视频号id
          }
        ],
			},
			rules: {
          advertiseType: [
            { required: true,message: '请选择',trigger: 'change' }
          ],
          title: [
            { required: false,message: '请填写标题',trigger: 'blur' }
          ],
          subTitle: [
            { required: false,message: '请填写副标题',trigger: 'blur' }
          ],
          isShow: [
            { required: true,message: '请选择', trigger: 'change' }
          ],
          imgUrl: [
            { required: true,message: '请上传图片', trigger: 'change' }
          ],
          appId: [
            { required: true,message: '请填写appId',trigger: ['blur','change'] }
          ],
          videoId: [
            { required: true,message: '请填写视频号id',trigger: ['blur','change'] }
          ],
          punchActivityId: [
            { required: true,message: '请选择', trigger: 'change' }
          ],
          redirectType: [
            { required: true,message: '请选择', trigger: 'change' }
          ],
          redirectUrl: [
            { required: true,message: '请填写链接',trigger: 'blur' }
          ],
          wxRedirectUrl: [
            { required: true,message: '请填写链接',trigger: 'blur' }
          ],
          appRedirectType: [
            { required: true,message: '请选择', trigger: 'change' }
          ],
          tagIdList: [
            { required: true,message: '请选择', trigger: 'change' }
          ],
          appRedirectId: [
            { required: true,message: '请选择', trigger: 'change' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {
    this.getTag()
    this.getadminDict()
    this.getAppSelect(1)
    this.getAppSelect(2)
    this.getAppSelect(3)
    this.getAppSelect(4)
    this.getAppSelect(12)
    this.getAppSelect(13)
    this.getAppSelect(15)
    this.ruleForm.id = this.id
    if(this.pathType == 'add'){
      this.title = '新增广告链接'
      this.ruleForm.id = ''
    }else{
      this.getDatail()
      this.title = '编辑广告链接'
    }
    
    
	},
  methods: {
    init(){
       this.ruleForm.punchActivityId = ''//打卡活动id
       this.ruleForm.sort = ''
    },
    //获取字典值
    getadminDict() {
      const params = {
        dictType: "app_redirect_type",
      };
      adminDict(params).then((res) => {
        this.appTypeList = res.result[0].dictList
      });
    },
    //获取标签下拉
    getTag(){
      addTagSelect().then(res => {
        this.tagList = res.result
      })
    },
    //app跳转活动
    getAppSelect(type){
      var data = {
        appRedirectType: type
      }
      bannerSelect(data).then(res => {
        if(type == 1){
          this.appList_1 = res.result
        }else if(type == 2){
          this.appList_2 = res.result
        }else if(type == 3){
          this.appList_3 = res.result
        }else if(type == 4){
          this.appList_4 = res.result
        }else if(type == 12){
          this.appList_12 = res.result
        }else if(type == 13){
          this.appList_13 = res.result
        }else if(type == 15){
          this.appList_15 = res.result
        }
      })
    },
    //选择广告类型
    changeAdvertiseType(e){
      var arr = [0, 1, 2, 3, 3, 4, 5 ]
      var num = arr[e]
      this.ruleForm.bannerList = []
      for(var i = 0;i< num;i++){
         var obj = {
          appId: '',//
          imgUrl: '',//图片url
          title: '',//图片标题
          subTitle: '',//图片副标题
          redirectType: '',//链接类型（1 神椰 2 H5 3 小程序）
          redirectUrl: '',//指定跳转链接
          wxRedirectUrl:'',//神椰小程序跳转链接
          appRedirectType: '', //APP跳转类型 1打卡活动 2打卡店铺 3神椰NFR 4盲盒活动 5神椰集市 6神椰工厂 7我的邀请码	
          appRedirectId:'', //APP跳转业务id
          appRedirectIdList: [],
          tagIdList: [],
          videoId:'',//视频号id
        }
        this.ruleForm.bannerList.push(obj)
      }
      console.log('this.ruleForm.bannerList',this.ruleForm.bannerList)
    },
    changAppRedirectType(val,index){
      console.log('val',val)
      console.log('index',index)
      if(this.ruleForm.bannerList[index].appRedirectId){
        this.ruleForm.bannerList[index].appRedirectId = null 
      }
      if(val == 1){
        this.ruleForm.bannerList[index].appRedirectIdList = this.appList_1
      }else if(val == 2){
        this.ruleForm.bannerList[index].appRedirectIdList = this.appList_2
      }else if(val == 3){
        this.ruleForm.bannerList[index].appRedirectIdList = this.appList_3
      }else if(val == 4){
        this.ruleForm.bannerList[index].appRedirectIdList = this.appList_4
      }else if(val == 12){
        this.ruleForm.bannerList[index].appRedirectIdList = this.appList_12
      }else if(val == 13){
        this.ruleForm.bannerList[index].appRedirectIdList = this.appList_13
      }else if(val == 15){
        this.ruleForm.bannerList[index].appRedirectIdList = this.appList_15
      }
      
    },
  
    //获取详情
    getDatail(){
      var params = {
        advertisePageType: 1,
        id: this.id
      }
      advertisementInfo(params).then(res => {
        this.ruleForm = res.result
        this.ruleForm.bannerList = this.ruleForm.bannerList.map((item,index) => {
          if(item.appRedirectType == 1){
            item.appRedirectIdList = this.appList_1
          }else if(item.appRedirectType == 2){
            item.appRedirectIdList = this.appList_2
          }else if(item.appRedirectType == 3){
            item.appRedirectIdList = this.appList_3
          }else if(item.appRedirectType == 4){
            item.appRedirectIdList = this.appList_4
          }else if(item.appRedirectType == 12){
            item.appRedirectIdList = this.appList_12
          }else if(item.appRedirectType == 13){
            item.appRedirectIdList = this.appList_13
          }else if(item.appRedirectType == 15){
            item.appRedirectIdList = this.appList_15
          }
          return item
        })
      })
    },
    //新建子账号
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if(this.pathType == 'add'){
            var data = {
            ...this.ruleForm
            }
            addAdvertisement(data).then(res => {
             
              setTimeout(() => {
                this.handleClose()
                this.$message.success('创建成功')
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(()=> {
              this.loading = false
            }).finally(() => {

            })
          }else if(this.pathType == 'edit'){
            var data = {
            ...this.ruleForm
            }
            editAdvertisement(data).then(res => {
              setTimeout(() => {
                this.$message.success('修改成功')
                this.handleClose()
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(()=> {
              this.loading = false
            }).finally(() => {

            })
          }
            
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
   
    //轮播图广告上传图片
    getBannerImg(e,index){
      console.log('index',index)
      this.ruleForm.bannerList[index].imgUrl = e
      console.log('this.ruleForm.',this.ruleForm)
    },
    //上传图片
    getImg(e){
      this.ruleForm.imgUrl = e
      this.$refs['imgRef'].clearValidate();
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}
.el-input{
  width: 300px;
}
.template_box{
  margin: 20px 0 20px 50px;
  .oneImg{
    width: 460px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f6f6f6;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .twoImg{
    width: 460px;
    display: flex;
    justify-content: space-between;
    .kong_img{
      width: 220px;
      height: 120px;
      background: #f6f6f6;
      display: flex;
      justify-content: center;
      align-items: center;
      
    }
    .yl_img{
      width: 220px;
      height: 120px;
      border-radius: 10px;
    }
  }
  .three_Img_1{
    width: 460px;
    display: flex;
    justify-content: space-between;
    .left{
      width: 220px;
      height: 260px;
      background: #f6f6f6;
      display: flex;
      justify-content: center;
      align-items: center;
      .kong_img{
        width: 220px;
        height: 260px;
        background: #f6f6f6;
        display: flex;
        justify-content: center;
        align-items: center;
        
      }
      .yl_img{
        width: 220px;
        height: 260px;
        border-radius: 10px;
      }
    }
    .right{
      width: 220px;
      height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div{
        width: 220px;
        height: 120px;
        background: #f6f6f6;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .kong_img{
        width: 220px;
        height: 120px;
        background: #f6f6f6;
        display: flex;
        justify-content: center;
        align-items: center;
        
      }
      .yl_img{
        width: 220px;
        height: 120px;
        border-radius: 10px;
      }
    }
  }
  .four_Img{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    .list{
      width: 150px;
      height: 100px;
      margin-right: 15px;
      .yl_img{
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
      .kong1_img{
        width: 150px;
        height: 100px;
        background: #f6f6f6;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
      }
    }
  }
}
.bannerBox{
  border: 1px solid #f5f5f5;
  border-radius: 10px;
  padding-top: 20px;
  margin-bottom: 20px;
}
.imgBox{
  border: 1px solid #f5f5f5;
  border-radius: 12px;
  padding: 20px;
  width: 800px;
  .name{
    font-size: 16px;
    color: #606266;
    margin-bottom: 10px;
    padding-left: 50px;
  }
}
.tagSel{
  width: 500px;
}
</style>